<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input
        type="text"
        v-model="ruleForm.username"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item label="邮件" prop="email">
      <el-input
        type="text"
        v-model="ruleForm.email"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item label="地址" prop="address">
      <el-input
        type="text"
        v-model="ruleForm.address"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        type="text"
        v-model="ruleForm.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item label="手机" prop="phone">
      <el-input v-model.number="ruleForm.phone"></el-input>
    </el-form-item>

    <el-form-item label="权限">
      <el-select v-model="ruleForm.admin" placeholder="权限">
        <el-option label="管理员" value="1"></el-option>
        <el-option label="用户" value="0"></el-option>
      </el-select>
    </el-form-item>

  
    <el-upload
      class="avatar-uploader"
      action="http://localhost:8888/common/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >头像上传
      <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import mytable from "@/api/table";

export default {
  data() {
    return {
      ruleForm: {
        username: "",
        email: "",
        password: "",
        admin: "",
        phone: "",
        avatar:''
      },
    };
  },
  created() {
    var id = this.$route.params.id;
    console.log("=============" + id);
    if (!isNaN(id)) {
      mytable.getUserById(id).then((res) => {
        this.ruleForm = res.data;
      });
    }
  },
  methods: {
    submitForm(ruleForm) {
      mytable.addUser(this.ruleForm).then((res) => {
        //成功则刷新页面
        console.log("成功");
        this.resetForm(ruleForm);
        this.$router.push({ name: "lookUser" });
      });
    },

    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },

    //上传头像成功后
    handleAvatarSuccess(res){
      //http://10.252.36.59:8080/common/download/5fec4dcd-4d8b-49eb-bf1e-e45fee3887b0.jpg
      // res.message
      console.log("====================")
      var url=res.message
      this.ruleForm.avatar=process.env.VUE_APP_BASE_API+'/common/download/'+url
      // http://10.252.36.59:8080/common/download/5fec4dcd-4d8b-49eb-bf1e-e45fee3887b0.jpg
      console.log(this.ruleForm.avatar)
      this.$forceUpdate() // 触发强制刷新
      
    }
  },
};
</script>

<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>